const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlwebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: './src/main.js', // 配置打包入口文件
  output: { // 配置输出路径
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].[hash].js",
  },
  mode: 'development', // 开发模式
  // 配置别名和扩展名
  resolve: {
    // 可以省略后缀名的文件
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
    // 别名
    alias: {
        '@': path.resolve(__dirname, 'src'),
    },
  },
  plugins: [
    // 配置默认的index.html, 打包后的js自动引入到index.html文件中
    new HtmlwebpackPlugin({
      template: './public/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'css/index.css' // 配置打包生成的目录
    }),
    // 配置清除打包目录，防止打包产物有残留
    new CleanWebpackPlugin(),
    // 添加vue文件编译loader配置
    new VueLoaderPlugin(),
  ],
  module: {
    rules: [
      {
        // 正则匹配css文件
        test: /.css$/,
        // loader的解析顺序是倒叙, 先使用css-loader解析css，在使用style-loader解析
        // use: [ 'style-loader', 'css-loader'],
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          },
          'css-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader",
        }, {
          loader: "css-loader",
        }, {
          loader: "less-loader",
        }],
      },
      // 配置图片打包
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 限制图片大小，小于8K转换成base64 大于8k的部分则不转换
              limit: 8 * 1024, 
              name: '[name].[ext]',
              publicPath: '../images/', // 设置发布的目录
              outputPath: "images/",
            },
          },
        ],
      },
      // js语法兼容
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      // 添加 vue编译插件
      {
        test: /\.vue/,
        use: 'vue-loader'
      }
    ],
  },
  // 起服务
  devServer: {
    port: 3000, // 前端启动端口
    open: true, // 启动自动打开浏览器
  },

  // 提取公共模块
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30, //按需加载时的最大并行请求数
      maxInitialRequests: 30, //入口点的最大并行请求数
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
}